<template>
  <div class="container">
    <div class="video-wrap">
      <div class="video" ref="videoList" :style="videoStyle">
        <div class="player-wrap" v-for="ind in videoNum" :key="ind">
          <NstdVideoPlayer
            playType="realVideo"
            :lbFlag="lbFlag"
            :videoList="videoList"
            :videoConf="videoList[ind - 1]"
            v-if="videoList.length > 0 && videoList[ind - 1] && videoList[ind - 1].parentCode1"
          ></NstdVideoPlayer>
          <!-- <div class="mark" :class="deviceIndex === ind - 1 ? 'active' : ''" @click="videoPlayerClick(ind - 1)">
            <vue-cropper
              v-if="videoList[ind - 1]"
              :ref="`cropper${ind - 1}`"
              class="cropper-mark"
              :img="option.img"
              :canScale="false"
              :canMove="false"
              :canMoveBox="false"
              @real-time="cameraCtrlRestRealPs3dLocation"
              mode="cover"
            ></vue-cropper>
          </div> -->
        </div>
      </div>
      <!-- <div class="video-opt">
        <template v-for="(itm, ind) in videoOptList">
          <el-popover placement="top" width="100" trigger="hover" v-if="itm.value === 'lunbo'">
            <div style="display: flex">
              <el-input-number
                size="mini"
                placeholder="轮播间隔（s）"
                v-model="lbTime"
                :min="0"
                controls-position="right"
                style="width: 100%"
              />
              <div style="color: #fff; align-self: center; margin-left: 5px">秒</div>
            </div>
            <div slot="reference" class="opreat" @click="videoOptClick(itm)" :key="itm + ind">
              <img :src="itm.src" alt="" />
              <span>{{ itm.name }}</span>
            </div>
          </el-popover>
          <div
            class="opreat"
            v-else-if="itm.type === 'opreat' && itm.value !== 'lunbo'"
            @click="videoOptClick(itm)"
            :key="itm + ind"
          >
            <img :src="itm.src" alt="" />
            <span>{{ itm.name }}</span>
          </div>
          <div class="devider" v-else :key="ind"></div>
        </template>
      </div> -->
      <!-- </div>
    <RobotControlDia
      v-if="[1, 2, 3].includes(currentDeviceInfo.mountPatroldeviceType)"
      :robot="currentDeviceInfo.mountPatroldeviceCode"
      :setShow="setShow"
      class="real-robot"
      @handleClose="handleClose"
    />
    <NstdBoxTitle v-else class="opt-wrap" title="视频控制区域及预置位设置">
      <div class="dial-wrap">
        <div class="opt-left">
          <img
            :src="item.src"
            alt=""
            v-for="(item, index) in optList"
            :key="index"
            :style="item.style"
            @mouseup="controlClick(item, 'up')"
            @mousedown="controlClick(item, 'down')"
          />
          <div class="center-icon"></div>
        </div>
        <div class="opt-right">
          <span class="txt">速度调节:</span>
          <el-slider class="speed" v-model="speed" :marks="speedMarks"></el-slider>
        </div>
      </div>
      <div class="opt-btns">
        <img
          :src="item.src"
          alt=""
          v-for="(item, index) in btnsList"
          :key="index"
          class="btns"
          :title="item.title"
          @mouseup="controlClick(item, 'up')"
          @mousedown="controlClick(item, 'down')"
        />
      </div>
      <div class="voice-video">
        <div class="box" @click="voiceBtnClick">
          <img :src="voiceSrc" alt="" />
          <span class="txt">{{ voiceFlag ? '语音对讲' : '停止对讲' }}</span>
        </div>
        <el-popover placement="top" width="100" trigger="hover">
          <div style="display: flex">
            <el-input-number
              size="mini"
              placeholder="手动设定时长（min）"
              v-model="lxTime"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
            <div style="color: #fff; align-self: center; margin-left: 5px">分</div>
          </div>
          <div slot="reference" class="box" @click="videoBtnClick">
            <img :src="videoSrc" alt="" />
            <span class="txt">{{ videoFlag ? '启动录像' : '停止录像' }}</span>
          </div>
        </el-popover>
      </div>
      <div class="position-wrap">
        <span>预置位：</span>
        <el-select
          style="width: 150px"
          class="tree-type"
          v-model="presetPosition"
          placeholder="请选择"
          slot="head"
          size="mini"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in positionList"
            :key="item.presetPosition + index"
            :label="item.presetName"
            :value="item.presetPosition"
          >
          </el-option>
        </el-select>
        <el-popover placement="bottom" width="260" v-model="showRenamePopover" trigger="manual">
          <div class="form-item" style="margin-bottom: 10px">
            <span class="form-item-label">预置位名称：</span>
            <el-input
              style="width: 134px"
              class="tree-type"
              v-model="setForm.presetName"
              v-specialChar
              maxlength="64"
              placeholder="请选择"
              size="mini"
            >
            </el-input>
          </div>
          <div style="text-align: right; margin: 0">
            <el-button
              size="mini"
              type="default"
              style="background-color: #c5c5c5 !important"
              @click="showRenamePopover = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" style="background-color: #1dd4e7 !important" @click="setPresetName"
              >确定</el-button
            >
          </div>
          <span class="rename" slot="reference" @click="rename">修改名称</span>
        </el-popover>
      </div>
      <div class="position-wrap" style="margin-bottom: 10px">
        <span>预置位：</span>
        <img :src="settingSrc" class="btns" @click="setPresetPosition()" />
        <img :src="delSrc" class="btns" @click="delPresetPosition()" />
        <img :src="arrowSrc" class="btns" @click="cameraCtrlRestSetPresetPos()" />
        <el-popover placement="bottom" width="260" v-model="showIsSettedPresetPositionPopover" trigger="manual">
          <div class="form-item" style="margin-bottom: 10px">
            <span class="form-item-label">关联预置位：</span>
            <el-select
              style="width: 134px"
              class="tree-type"
              v-model="setForm.isSettedPresetPosition"
              placeholder="请选择"
              size="mini"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in isSettedPresetPositionList"
                :key="item.presetPosition + index"
                :label="item.presetName"
                :value="item.presetPosition"
              >
              </el-option>
            </el-select>
          </div>
          <div class="form-item" style="margin-bottom: 10px">
            <span class="form-item-label">设置守望时间：</span>
            <div style="display: inline">
              <el-input-number
                type="number"
                style="width: 100px"
                v-model="setForm.parkTime"
                placeholder="请选择"
                size="mini"
                :min="1"
                :max="9999"
                controls-position="right"
              />
              分钟
            </div>
          </div>
              <div class="form-item" style="margin-bottom: 10px">
            <span class="form-item-label">守望位状态：</span>
            <el-switch v-model="setForm.isPark" active-color="#1DD4E7"></el-switch>
          </div>-->
      <!-- <div style="text-align: right; margin: 0">
            <el-button
              size="mini"
              type="default"
              style="background-color: #c5c5c5 !important"
              @click="showIsSettedPresetPositionPopover = false"
              >取消</el-button
            >
            <el-button
              type="primary"
              size="mini"
              style="background-color: #1dd4e7 !important"
              @click="restPtzParkAction"
              >确定</el-button
            >
          </div>
          <img :src="partSrc" class="btns" slot="reference" @click="showRestPtzParkAction" />
        </el-popover>
      </div>
      <div class="position-wrap">
        <span>优先级：</span>
        <el-select v-model="priority" size="mini" @change="changePriority">
          <el-option v-for="item in priorityData" :label="item.label" :value="item.value" :key="item.key" />
        </el-select>
      </div>
    </NstdBoxTitle> -->
    </div>
  </div>
</template>
<script setup>
  // import RobotControlDia from './RobotControlDia.vue';
  // import debounce from 'lodash.debounce';
  // import NstdBoxTitle from './NstdBoxTitle.vue';
  import NstdVideoPlayer from './NstdVideoPlayerWfs.vue';
  import { getHwTemperature, StartVoice } from '@/api/inspect.js';
  import { unref, defineEmits, defineProps, computed, ref, watch, reactive, onMounted } from 'vue';
  const emits = defineEmits(['on-btn-click']);
  const props = defineProps({
    currentDeviceInfo: Object,
    treeType: String
  });
  const bandwidth = ref(0);
  const priority = ref('');
  const priorityData = [
    {
      label: 1,
      value: 1
    },
    {
      label: 2,
      value: 2
    },
    {
      label: 3,
      value: 3
    },
    {
      label: 4,
      value: 4
    },
    {
      label: 5,
      value: 5
    }
  ];
  const videoListCopy = ref([]);
  const lbTime = ref('');
  const lbIndex = ref(0);
  const lbTimer = ref(null);
  const lbFlag = ref(false);
  const timerList = ref([]);
  const ip = ref(
    window.location.hostname === 'localhost' ? process.env.VUE_APP_DEV_SERVER_IP : window.location.hostname
  );
  const setShow = ref(false);
  const btnType = ref('');
  const timer = ref(null);
  const lxTime = ref('');
  const cropper = ref(true);
  const option = reactive({
    img: import('@/assets/images/kong.png')
  });

  const optList = ref([
    {
      controlCmd: '9',
      src: import('@/assets/icon/left.png'),
      style: {
        width: '12px',
        height: '22px',
        top: 'calc( 50% - 11px )',
        left: '18px'
      }
    },
    {
      controlCmd: '10',
      src: import('@/assets/icon/right.png'),
      style: {
        width: '12px',
        height: '22px',
        top: 'calc( 50% - 11px )',
        right: '18px'
      }
    },
    {
      controlCmd: '7',
      src: import('@/assets/icon/top.png'),
      style: {
        width: '22px',
        height: '12px',
        top: '18px',
        left: 'calc( 50% - 11px )'
      }
    },
    {
      controlCmd: '8',
      src: import('@/assets/icon/bottom.png'),
      style: {
        width: '22px',
        height: '12px',
        bottom: '18px',
        left: 'calc( 50% - 11px )'
      }
    },
    {
      controlCmd: '11',
      src: import('@/assets/icon/left-top.png'),
      style: {
        width: '12px',
        height: '12px',
        top: '28px',
        left: '28px'
      }
    },
    {
      controlCmd: '12',
      src: import('@/assets/icon/right-top.png'),
      style: {
        width: '12px',
        height: '12px',
        top: '28px',
        right: '28px'
      }
    },
    {
      controlCmd: '13',
      src: import('@/assets/icon/left-bottom.png'),
      style: {
        width: '12px',
        height: '12px',
        bottom: '28px',
        left: '28px'
      }
    },
    {
      controlCmd: '14',
      src: import('@/assets/icon/right-bottom.png'),
      style: {
        width: '12px',
        height: '12px',
        bottom: '28px',
        right: '28px'
      }
    }
  ]);
  const speed = ref(25);
  const btnsList = ref([
    {
      controlCmd: '1',
      src: import('@/assets/icon/scan-add.png'),
      title: '焦距变大'
    },
    {
      controlCmd: '3',
      src: import('@/assets/icon/copy.png'),
      title: '焦点前调'
    },
    {
      controlCmd: '5',
      src: import('@/assets/icon/add.png'),
      title: '光圈扩大'
    },
    {
      controlCmd: '16',
      src: import('@/assets/icon/sun.png'),
      title: '补光'
    },
    {
      controlCmd: '15',
      src: import('@/assets/icon/set.png'),
      title: '雨刷'
    },
    {
      controlCmd: '2',
      src: import('@/assets/icon/scan.png'),
      title: '焦距变小'
    },
    {
      controlCmd: '4',
      src: import('@/assets/icon/copy-yellow.png'),
      title: '焦点后调'
    },
    {
      controlCmd: '6',
      src: import('@/assets/icon/cutdown.png'),
      title: '光圈缩小'
    },
    {
      type: 'search-add',
      src: import('@/assets/icon/search-add.png'),
      title: '电子放大'
    },
    {
      type: '3d',
      src: import('@/assets/icon/3d.png'),
      title: '3D放大'
    }
  ]);
  const voiceFlag = ref(true);
  const videoFlag = ref(true);
  const presetPosition = ref(''); // 当前预置点位
  const positionList = ref([]); // 预置位点位信息列表
  const presetPositionConf = ref({}); // 当前预置点位配置信息
  const isSettedPresetPositionList = ref([]); // 当前关联的预置点位列表
  const isSettedPresetPositionConf = ref({}); // 当前关联的预置点位配置信息
  const settingSrc = ref(import('@/assets/icon/setting.png'));
  const delSrc = ref(import('@/assets/icon/del.png'));
  const arrowSrc = ref(import('@/assets/icon/arrow.png'));
  const partSrc = ref(import('@/assets/icon/part.png'));
  const setForm = ref({
    isSettedPresetPosition: '', // 当前关联的预置点位
    parkTime: '', // 设置守望时间
    isPark: false, // 守望位状态
    presetName: '' // 预置位名称
  });
  const isSettedPresetPosition = ref(''); // 当前关联的预置点位
  const parkTime = ref(''); // 设置守望时间
  const isPark = ref(false); // 守望位状态
  const presetName = ref(''); // 预置位名称
  const isSettedPresetPositionPopover = ref(false); // 是否展示关联预置位弹框
  const showIsSettedPresetPositionPopover = ref(false); // 是否展示关联预置位弹框
  const showRenamePopover = ref(false); // 是否展示修改名称弹框
  // const speedMarks = ref({
  //   0: {
  //     style: {
  //       color: '#fff'
  //     },
  //     label: this.$createElement('span', '0')
  //   },
  //   25: {
  //     style: {
  //       color: '#fff'
  //     },
  //     label: this.$createElement('span', '25')
  //   },
  //   50: {
  //     style: {
  //       color: '#fff'
  //     },
  //     label: this.$createElement('span', '50')
  //   },
  //   75: {
  //     style: {
  //       color: '#fff'
  //     },
  //     label: this.$createElement('span', '75')
  //   },
  //   100: {
  //     style: {
  //       color: '#fff'
  //     },
  //     label: this.$createElement('span', '100')
  //   }
  // });
  const scanFlag = ref(false); // 开启滚轮放大缩小
  const videoNum = ref(1); // 视频流分屏个数
  const videoCol = ref(1); // 视频流分屏列数
  const patrolDeviceCode = ref(''); // 左侧树对应设备code
  const parentCode1 = ref(''); // 当前视频流对应设备code
  const stationCode = ref(''); // 左侧树对应设备父级节点变电站code
  const deviceIndex = ref(0); // 当前选中视频流下表
  const curVideoConf = ref({}); // 当前选中视频流配置
  const cropperFlag = ref(false);
  const videoList = ref([{}]);
  const ws1 = ref(null);
  // 监听 currentDeviceInfo 的变化
  // watch(
  //   () => props.currentDeviceInfo,
  //   async (n) => {
  //     if (!n) {
  //       return;
  //     }

  //     const cropperRefs = document.querySelectorAll(`.vue-cropper[data-device-index="${deviceIndex.value}"]`);
  //     if (cropperRefs.length > 0) {
  //       cropperRefs[0].clearCrop();
  //       cropperRefs[0].stopCrop();
  //     }

  //     cropperFlag.value = false;
  //     console.log(deviceIndex.value, 'deviceIndex');
  //     console.log(videoList.value, 'videoList');
  //     videoList.value.splice(deviceIndex.value, 1, n);
  //     priority.value = n.priority || '';

  //     if (!bandwidth.value) {
  //       const res = await getStationBandwidth(stationCode.value);
  //       bandwidth.value = res.data;
  //     }

  //     const videoListFiltered = videoList.value.filter((item) => Object.keys(item).length);
  //     console.log(videoListFiltered, 'videoList');
  //     console.log(bandwidth.value, 'bandwidth');

  //     if (videoListFiltered.length > bandwidth.value) {
  //       const videoLists = videoListFiltered.filter((item) => item.priority > priority.value);
  //       if (videoLists.length === 0) {
  //         alert('变电站带宽限制，请关闭其它摄像头');
  //         return;
  //       } else {
  //         const min = Math.max(...videoListFiltered.map((item) => item.priority));
  //         console.log(min, 'min');
  //         const indexToClose = videoListFiltered.findIndex((item) => item.priority === min);
  //         if (indexToClose !== -1) {
  //           deviceIndex.value = indexToClose;
  //           closeVideoClient({ type: 'close' });
  //         }
  //       }
  //     }

  //     curVideoConf.value = n;
  //     const { patrolDeviceCode, parentCode1, stationCode } = curVideoConf.value;
  //     patrolDeviceCode.value = patrolDeviceCode || '';
  //     parentCode1.value = parentCode1 || '';
  //     stationCode.value = stationCode || '';
  //   },
  //   { deep: true, immediate: true }
  // );

  // 监听 presetPosition 的变化
  // watch(
  //   () => presetPosition.value,
  //   (n) => {
  //     if (n) {
  //       const arr = positionList.value.filter((item) => item.presetPosition === n);
  //       if (arr.length) {
  //         presetPositionConf.value = arr[0] || {};
  //       }
  //     }
  //   },
  //   { immediate: true }
  // );

  // // 监听 setForm.isSettedPresetPosition 的变化
  // watch(
  //   () => setForm.isSettedPresetPosition,
  //   (n) => {
  //     if (n) {
  //       const arr = isSettedPresetPositionList.value.filter((item) => item.presetPosition === n);
  //       if (arr.length) {
  //         isSettedPresetPositionConf.value = arr[0] || {};
  //         setForm.isPark = isSettedPresetPositionConf.value?.isPark || false;
  //       }
  //     }
  //   },
  //   { deep: true, immediate: true }
  // );

  // // 监听 patrolDeviceCode 的变化
  // watch(
  //   () => patrolDeviceCode.value,
  //   (n) => {
  //     if (n) {
  //       presetPosition.value = '';
  //       setForm.isSettedPresetPosition = '';
  //       camPresetPositionCfgDetail();
  //       // 获取所有选中状态的预置点位
  //       camPresetPositionCfgDetail(1);
  //     }
  //   },
  //   { deep: true, immediate: true }
  // );
  // 使用 reactive 来定义响应式对象
  const stationInfo = computed(() => store.state.station.stationInfo);

  const videoStyle = computed(() => {
    const item = videoCol.value;
    const itemBox = 100 / item + '%';
    return {
      'grid-template-columns': `repeat(${item}, ${itemBox})`,
      'grid-template-rows': `repeat(${item}, ${itemBox})`
    };
  });

  const videoOptList = computed(() => {
    const videoMode1 = videoList.value[deviceIndex.value]?.videoMode1 ?? null;
    const baseList = [
      {
        type: 'opreat',
        src: '/assets/icon/one.png',
        name: '一屏',
        value: 'one'
      },
      {
        type: 'opreat',
        src: '/assets/icon/four.png',
        name: '四屏',
        value: 'four'
      },
      {
        type: 'opreat',
        src: '/assets/icon/nine.png',
        name: '九屏',
        value: 'nine'
      },
      {
        type: 'opreat',
        src: '/assets/icon/sixteen.png',
        name: '十六屏',
        value: 'sixteen'
      },
      {
        type: 'opreat',
        src: '/assets/icon/fullpage.png',
        name: '全屏',
        value: 'fullpage'
      },
      {
        type: 'devider'
      },
      {
        type: 'opreat',
        src: '/assets/icon/screenshot.png',
        name: '截图',
        value: 'screenshot'
      },
      {
        type: 'devider'
      },
      {
        type: 'opreat',
        src: '/assets/icon/close.png',
        name: '关闭',
        value: 'close'
      },
      {
        type: 'opreat',
        src: '/assets/icon/close-all.png',
        name: '关闭所有',
        value: 'close-all'
      }
    ];

    if (videoMode1 === '2') {
      return [
        ...baseList,
        {
          type: 'opreat',
          src: lbFlag.value ? '/assets/icon/lb-do.png' : '/assets/icon/lb.png',
          name: '轮播',
          value: 'lunbo'
        },
        {
          type: 'opreat',
          src: '/assets/icon/cew.png',
          name: '框点测温',
          value: 'cewen'
        }
      ];
    } else {
      return [
        ...baseList,
        {
          type: 'opreat',
          src: lbFlag.value ? '/assets/icon/lb-do.png' : '/assets/icon/lb.png',
          name: '轮播',
          value: 'lunbo'
        }
      ];
    }
  });

  const voiceSrc = computed(() => (voiceFlag.value ? '/assets/icon/voice-stop.png' : '/assets/icon/voice-start.png'));
  const videoSrc = computed(() => (videoFlag.value ? '/assets/icon/video-start.png' : '/assets/icon/video-stop.png'));
  function closeVideoClient({ type }) {
    // 这里实现关闭视频客户端的逻辑
  }
</script>
<style lang="scss">
  .real-robot.mb-dialog {
    position: static;
    width: 330px;
    .el-scrollbar {
      height: 78vh !important;
    }
  }
</style>
<style lang="less" scoped>
  .container {
    display: flex;
  }
  .video-wrap {
    // width: 1120px;
    flex: 1;
    margin-right: 10px;
  }
  .video {
    // width: 1120px;
    width: 100%;
    height: 630px;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-around;
    // align-items: flex-start;
    display: grid;
    .player-wrap {
      position: relative;
      position: relative;
      background-color: #000;
      margin-left: 1px;
      margin-top: 1px;

      .mark {
        position: absolute;
        pointer-events: none;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 1;
      }

      .active {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border: 1px dashed red;
      }
    }
  }
  .video-1 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-2 {
    width: 560px;
    height: 315px;
    background-color: #000;
  }
  .video-3 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-4 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 1120px;
    width: 100%;
    height: 90px;
    margin-top: 10px;
    background: linear-gradient(271deg, rgba(29, 212, 231, 0) 0%, #1dd4e7 60%, rgba(29, 212, 231, 0) 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 1 1;
    .opreat {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 50px;
      cursor: pointer;
      img {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
      }
      span {
        display: inline-block;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
    }
    .devider {
      width: 1px;
      height: 60px;
      margin-right: 50px;
      background: linear-gradient(180deg, rgba(225, 247, 255, 0) 0%, #d1f2ff 48%, rgba(192, 236, 255, 0) 100%);
    }
  }
  .opt-wrap {
    width: 330px;
    height: 730px;
    margin-right: 10px;
    .dial-wrap {
      display: flex;
      height: 120px;
      .opt-left {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        margin-right: 10px;
        background-image: url('~@/assets/icon/opt-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        cursor: pointer;
        img {
          position: absolute;
        }
        .center-icon {
          position: absolute;
          width: 32px;
          height: 32px;
          bottom: calc(50% - 16px);
          right: calc(50% - 16px);
          background: #1dd4e7;
          border-radius: 16px;
        }
      }
      .opt-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .txt {
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
        .speed {
          margin-left: 4px;
          margin-right: 10px;
          margin-top: 20px;
        }
      }
    }
    .opt-btns {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      .btns {
        width: 24px;
        height: 24px;
        margin-left: 34px;
        margin-bottom: 15px;
        cursor: pointer;
      }
    }
    .voice-video {
      display: flex;
      align-items: center;
      margin-left: 34px;
      margin-bottom: 10px;
      cursor: pointer;
      .box {
        display: flex;
        align-items: center;
        margin-right: 20px;
        img {
          width: 26px;
          height: 26px;
          margin-right: 4px;
        }
        .txt {
          width: 48px;
          height: 17px;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
      }
    }
    .position-wrap {
      margin-left: 34px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      span {
        width: 48px;
        height: 17px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        display: flex;
      }
      img {
        width: 20px;
        height: 18px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .rename {
    margin-left: 10px;
    text-decoration: underline;
    cursor: pointer;
  }
  .form-item-label {
    display: inline-block;
    width: 100px;
    color: #fff;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    font-style: normal;
  }
  .cropper-mark {
    width: 100%;
    height: 100%;
    background-image: none !important;
    /deep/.cropper-move {
      cursor: inherit !important;
    }
    /deep/.vue-cropper {
      background-image: none !important;
    }
    /deep/.cropper-box-canvas img {
      display: none !important;
    }
    /deep/.cropper-view-box {
      img {
        display: none !important;
      }
    }
  }
</style>
